<template>
  <div class="box">
    <header class="header">
      <div class="top">
        <a @click="goBack" class="iconfont icon-zuojiantou1"></a>
        <a>个人中心</a>
        <a class="iconfont icon-iconfontfenxiang3" @click="getPhoto"></a>
        <router-link to="/xinxi" tag="a" class="iconfont icon-bianji1"></router-link>
      </div>
    </header>
    <div class="content">
      <div class="main">
        <img src="./../../assets/food2.jpg"/>
      </div>
    </div>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
  </div>
</template>
<script>
import Vue from 'vue'
import { Actionsheet } from 'mint-ui'
Vue.use(Actionsheet)
export default {
  data () {
    return {
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header{
  @include rect(100%,0.45rem);
  @include background-color(#fff);
  @include text-color(#000);
  .top{
    @include rect(100%,0.45rem);
    border-bottom:1px solid #bbb;
    a:nth-of-type(1){
      @include font-size(26px);
      @include text-color(#000);
      @include line-height(35px);
      @include margin(3px 0 0 15px);
      font-weight: 600;
      float:left;
    }
    a:nth-of-type(2){
      @include font-size(18px);
      @include text-color(#000);
      @include line-height(40px);
      @include margin(0 25px);
      float:left;
    }
    a:nth-of-type(3){
      @include font-size(24px);
      @include text-color(#000);
      @include line-height(35px);
      @include margin(4px 20px 0 0 );
      font-weight: 600;
      float:right;
    }
    a:nth-of-type(4){
      @include font-size(24px);
      @include text-color(#000);
      @include line-height(35px);
      @include margin(3px 15px 0 15px);
      font-weight: 600;
      float:right;
    }
  }
}
.content{
  @include rect(100%,auto);
  @include background-color(rgba(241, 239, 239, 0.932));
  img{ 
    @include rect(100%,2rem);
  }
  .main{
      @include rect(100%,auto);
  }
}
</style>
